<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gauge Exmaple</title>
   
    <script type="text/javascript" src="js/mootools-core-1.3-full-compat.js"></script>
    
    <script type="text/javascript">
        // <![CDATA[
            
            function loadSwiff(){
                var swiff_obj = new Swiff('flash/pgauge.swf', {
                    id: 'mygauge', //IMPORTANT
                    width: 200,
                    height: 200,
                    params: {wmode: 'transparent'},
                    container: $('pgauge'), // Holds gauge, div...
                    vars: {title: 'My Ajax Gauge', 
                           bgimage: 'images/gauge.jpg'
                          }
                });
            }
            
            function getUpdate(){	
                    var request = new Request.JSON({
                        url: 'data/gauge_data.json',
                        onComplete: function(jsonObj) {
                            glbJSON = jsonObj
                            
                            var mydata = jsonObj.mygauge;
                            var another = jsonObj.another;
                            
                            aVal  = Number(another[0].vala); 
                            bVal  = Number(another[0].valb);
                            
                            sVal  = Number(mydata[0].val); 
                                    
                                // Second set of data, could be another gauge.
                                var livevals = $('livevals');
                                livevals.innerHTML = "Value: "+aVal+" and: "+bVal;
                            
                                $('mygauge').SetVariable("pValue", sVal); // Set the gauges value...
                        }
                    }).send();
                }
            
            window.addEvent('domready', function() {
                
                loadSwiff(); // add our Flash
                
                // Start polling for Json updates.
                var intUpdate = getUpdate.periodical(2000);
                
            });
            
            // Load immediately.
            getUpdate(); // initial load on page load.
            
        // ]]>
    </script>

    <style type="text/css">
            body {
                    background-color: #5F5F5F;
                    color: #cccccc;
            }
            td {
                    border: 1px solid #cccccc;
                    padding: 10px;
            }
            a:link    {color: #cccccc; }
            a:visited {color: #c8c8c8; }
            a:active  {color: #cccccc; }
            a:hover   {color: #ffffff; }
    </style>

    </head>

<body>
	<!-- Here is a test form to set the gauge value manually. -->
	<table cellpadding="5px" width="250">
			<td>Ajax + JSon + Flash Using Mootools</td>
		<tr>
			<!-- IMPORTANT Set ID so SWFOject places your object. --> 
			<td align="center">
				<div id="pgauge"></div>
			</td>
		<tr>
			<td>
				<div style="border: 1px solid #ffffff; padding: 10px; width: 250px;">
					<span id="livevals">Value: 0</span>
				</div>
			</td>
		</tr>
	</table>
	
</body>
</html>
